<template>
	<div class="homework-container">
		<!-- 作业标题区域 -->
		<div class="homework-header">
			<h2>{{ homeworkInfo.title }}</h2>
			<div class="homework-meta">
				<span>提交截止时间: {{ formatDate(homeworkInfo.deadline) }}</span>
				<span class="status-tag" :class="statusClass">{{ statusText }}</span>
				<span v-if="homeworkInfo.score !== null" class="score-tag">
					得分: {{ homeworkInfo.score }}/{{ homeworkInfo.totalScore }}
				</span>
			</div>
		</div>

		<!-- 作业详情区域 -->
		<div class="homework-detail">
			<h3>作业要求</h3>
			<div class="homework-description" v-html="homeworkInfo.description"></div>

			<h3 class="mt-4">我的提交</h3>
			<div v-if="submissionInfo" class="submission-content">
				<div v-if="submissionInfo.textContent" class="submission-text">
					{{ submissionInfo.textContent }}
				</div>

				<div v-if="submissionInfo.attachments && submissionInfo.attachments.length > 0" class="attachments">
					<h4>附件</h4>
					<ul>
						<li v-for="(file, index) in submissionInfo.attachments" :key="index">
							<a :href="file.url" target="_blank" class="file-link">
								<i class="icon-file"></i>{{ file.name }}
							</a>
						</li>
					</ul>
				</div>

				<div class="submission-time">
					提交时间: {{ formatDate(submissionInfo.submitTime) }}
				</div>
			</div>

			<div v-else class="no-submission">
				<p>你尚未提交该作业</p>
			</div>

			<!-- 教师评语区域 -->
			<div v-if="homeworkInfo.feedback" class="feedback-section mt-4">
				<h3>教师评语</h3>
				<div class="feedback-content">
					{{ homeworkInfo.feedback }}
				</div>
			</div>

			<!-- 评分详情区域 -->
			<div v-if="homeworkInfo.scoreDetails && homeworkInfo.scoreDetails.length > 0" class="score-details mt-4">
				<h3>评分详情</h3>
				<table class="score-table">
					<thead>
						<tr>
							<th>评分项</th>
							<th>满分</th>
							<th>得分</th>
							<th>评语</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, index) in homeworkInfo.scoreDetails" :key="index">
							<td>{{ item.item }}</td>
							<td>{{ item.fullScore }}</td>
							<td>{{ item.score }}</td>
							<td>{{ item.comment || '无' }}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ViewHomeworkScore',
		props: {
			// 作业ID，用于获取作业详情
			homeworkId: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				// 作业基本信息
				homeworkInfo: {
					title: '',
					description: '',
					deadline: '',
					totalScore: 0,
					score: null,
					feedback: '',
					scoreDetails: []
				},
				// 学生提交信息
				submissionInfo: null
			}
		},
		computed: {
			// 状态文本
			statusText() {
				if (this.homeworkInfo.score !== null) {
					return '已批改'
				}
				if (this.submissionInfo) {
					return '已提交，待批改'
				}
				// 检查是否已过截止日期
				if (new Date(this.homeworkInfo.deadline) < new Date() && !this.submissionInfo) {
					return '未提交，已逾期'
				}
				return '未提交'
			},
			// 状态标签样式
			statusClass() {
				if (this.homeworkInfo.score !== null) {
					return 'status-graded'
				}
				if (this.submissionInfo) {
					return 'status-submitted'
				}
				if (new Date(this.homeworkInfo.deadline) < new Date() && !this.submissionInfo) {
					return 'status-overdue'
				}
				return 'status-pending'
			}
		},
		mounted() {
			// 加载作业详情和提交信息
			this.loadHomeworkData()
		},
		methods: {
			// 加载作业数据
			loadHomeworkData() {
				// 实际项目中这里会调用API获取数据
				// 示例数据
				setTimeout(() => {
					this.homeworkInfo = {
						title: 'JavaScript高级编程作业',
						description: '<p>1. 实现一个Promise并发控制函数</p><p>2. 解释事件循环机制并举例说明</p><p>3. 实现一个简单的MVVM框架核心功能</p>',
						deadline: '2023-12-31T23:59:59',
						totalScore: 100,
						score: 85,
						feedback: '整体完成很好，Promise实现部分思路清晰，但事件循环的例子可以更丰富一些。继续加油！',
						scoreDetails: [{
								item: 'Promise实现',
								fullScore: 40,
								score: 35,
								comment: '实现正确，代码规范'
							},
							{
								item: '事件循环解释',
								fullScore: 30,
								score: 25,
								comment: '理论正确，例子稍显简单'
							},
							{
								item: 'MVVM框架',
								fullScore: 30,
								score: 25,
								comment: '核心功能实现，有扩展空间'
							}
						]
					}

					this.submissionInfo = {
						textContent: '1. Promise并发控制函数实现如下：...\n2. 事件循环机制是...\n3. MVVM框架实现思路：...',
						submitTime: '2023-12-28T15:30:22',
						attachments: [{
								name: '作业代码.zip',
								url: '/files/homework123.zip'
							},
							{
								name: '实现思路说明.docx',
								url: '/files/thoughts123.docx'
							}
						]
					}
				}, 500)
			},
			// 格式化日期
			formatDate(dateString) {
				if (!dateString) return ''
				const date = new Date(dateString)
				return date.toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit'
				})
			}
		}
	}
</script>

<style scoped>
	.homework-container {
		max-width: 1000px;
		margin: 20px auto;
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.homework-header {
		border-bottom: 1px solid #eee;
		padding-bottom: 15px;
		margin-bottom: 20px;
	}

	.homework-meta {
		display: flex;
		gap: 15px;
		margin-top: 10px;
		color: #666;
		font-size: 14px;
	}

	.status-tag {
		padding: 3px 8px;
		border-radius: 4px;
		font-weight: 500;
	}

	.status-graded {
		background-color: #e6f7ed;
		color: #00875a;
	}

	.status-submitted {
		background-color: #fff1b8;
		color: #d48806;
	}

	.status-overdue {
		background-color: #ffebe6;
		color: #cf1322;
	}

	.status-pending {
		background-color: #e8f3ff;
		color: #1890ff;
	}

	.score-tag {
		color: #1890ff;
		font-weight: 500;
	}

	.homework-detail {
		line-height: 1.6;
	}

	.homework-description {
		color: #333;
		margin-bottom: 20px;
	}

	.submission-content {
		padding: 15px;
		background-color: #f9f9f9;
		border-radius: 6px;
		margin-bottom: 15px;
	}

	.submission-text {
		white-space: pre-wrap;
		margin-bottom: 15px;
	}

	.attachments {
		margin: 15px 0;
	}

	.file-link {
		color: #1890ff;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		gap: 5px;
	}

	.file-link:hover {
		text-decoration: underline;
	}

	.submission-time {
		font-size: 13px;
		color: #666;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px dashed #eee;
	}

	.no-submission {
		color: #666;
		padding: 20px;
		text-align: center;
		background-color: #f9f9f9;
		border-radius: 6px;
	}

	.feedback-section {
		padding: 15px;
		background-color: #f0f7ff;
		border-radius: 6px;
	}

	.feedback-content {
		margin-top: 10px;
		line-height: 1.8;
	}

	.score-details {
		margin-top: 20px;
	}

	.score-table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 10px;
	}

	.score-table th,
	.score-table td {
		padding: 12px 15px;
		text-align: left;
		border-bottom: 1px solid #eee;
	}

	.score-table th {
		background-color: #f5f5f5;
		font-weight: 500;
	}

	.mt-4 {
		margin-top: 20px;
	}
</style>